$(function () {
    $("#user-dg").datagrid({
        striped: true,
        pagination: true,
        rownumbers: true,
        fitColumns: true,
        scrollbarSize: 0,
        width: "auto",
        showFooter: true,
        url: 'user?method=findAllAndPage',
        onBeforeSelect: function () {
            return false;
        },
        columns: [[
            // {field: 'id', title: '用户编号', width: 50, align: 'left'},
            {field: 'username', title: '用户名', width: 50, align: 'left', halign: 'center'},
            {field: 'realname', title: '姓名', width: 50, align: 'left', halign: 'center'},
            {field: 'gender', title: '性别', width: 20, align: 'left', halign: 'center'},
            {field: 'roleName', title: '用户权限', width: 50, align: 'left', halign: 'center'},
            {field: 'createdTime', title: '注册时间', width: 50, align: 'center', halign: 'center'},
            {field: 'updatedTime', title: '上次登录时间', width: 50, align: 'center', halign: 'center'},
            {
                field: 'id', title: '操作', width: 40, formatter: function (value, row, index) {
                    let edit = '<button type="button" class="btn btn-primary btn-xs editUserBtn" name="edit"' +
                        ' data-value="' + value + '" ><i class="fa fa-pencil"></i>&nbsp;编辑</button>&nbsp;<button' +
                        ' type="button" class="btn btn-danger btn-xs delUserBtn" name="del" data-value="' + value + '"><i class="fa fa-trash"></i>&nbsp;删除</button>';
                    return value === "0" ? "" : edit;

                }, align: 'center'
            },
        ]],
        toolbar: [
            {
                iconCls: 'icon-add',
                text: "新增",
                handler: function () {
                    $("#add").window('open');
                    $("#iconCls")[0].focus();
                }
            }
        ]
    });

    $("#add").window({
        width: 600,
        height: 450,
        title: '新增用户',
        iconCls: 'icon-add',
        collapsible: true,
        minimizable: false,
        maximizable: false,
        resizable: false,
        closed: true
    });

    $("#edit").window({
        width: 600,
        height: 450,
        title: '修改用户',
        iconCls: 'icon-edit',
        collapsible: true,
        minimizable: false,
        maximizable: false,
        resizable: false,
        closed: true
    });

    $("#btAdd").on("click", function () {
        let $username = $("#userName"),
            $realname = $("#realName"),
            $gender = $("#gender"),
            $role = $("#role");
        let username = $.trim($username.val());
        let realName = $.trim($realname.val());
        let gender = $.trim($gender.val());
        let role = $.trim($role.val());
        if (!username) {
            layer.msg("用户名不能为空", {icon: 2});
            $username.trigger("focus");
            return;
        }
        if (!realName) {
            layer.msg("姓名不能为空", {icon: 2});
            $realname.trigger("focus");
            return;
        }
        $.ajax({
            url: "user",
            type: "post",
            data: {
                method: "save",
                username: username,
                realName: realName,
                gender: gender,
                roleId: role
            },
            dataType: "json",
            success: function (data) {
                if (data.status === 20000) {
                    layer.msg(data.msg, {icon: 6, time: 1000}, function () {
                        $("#add").window("close");
                        $('#user-dg').datagrid('reload');
                        $username.val("");
                        $realname.val("");
                        $gender.val("male");
                        $role.val("1003");
                    });
                } else {
                    layer.msg(data.msg, {icon: 5, time: 1000});
                }
            },
            error: function () {
                layer.msg("未知错误，请联系系统管理员！", {icon: 5, time: 1000});
            }
        });
    });

    let id = "";
    $("body").on("click", ".editUserBtn", function () {
        $("#edit").window('open');
        id = $(this).attr("data-value");

        $.get("user", {method: "findById", id: id}, function (result) {
            let $username = $("#userNameEdit"),
                $realname = $("#realNameEdit"),
                $gender = $("#genderEdit"),
                $role = $("#roleEdit");
            $username.val(result.data.username);
            $realname.val(result.data.realname);
            $gender.val(result.data.gender);
            $role.val(result.data.roleId);
        }, "json");
    });

    $("#btEdit").on("click", function () {
        let $realname = $("#realNameEdit"),
            $gender = $("#genderEdit"),
            $role = $("#roleEdit");

        let realName = $.trim($realname.val());
        let gender = $.trim($gender.val());
        let role = $.trim($role.val());
        if (!realName) {
            layer.msg("姓名不能为空", {icon: 2});
            $realname.trigger("focus");
            return;
        }

        let json = {
            method: "update",
            id: id,
            realName: realName,
            gender: gender,
            roleId: role
        };

        $.post("user", json, function (data) {
            if (data.status === 20000) {
                layer.msg(data.msg, {icon: 6, time: 1000}, function () {
                    $("#edit").window("close");
                    $('#user-dg').datagrid('reload');
                });
            } else {
                layer.msg(data.msg, {icon: 5, time: 1000});
            }
        }, "json");
    });

    $("body").on("click", ".delUserBtn", function () {
        id = $(this).attr("data-value");
        layer.confirm("确认删除该条数据吗？", {icon: 3, title: "删除确认"}, function (index) {
            $.get("user", {method: "delete", id: id}, function (data) {
                if (data.status === 20000) {
                    layer.msg(data.msg, {icon: 6, time: 1000}, function () {
                        $('#user-dg').datagrid('reload');
                    });
                } else {
                    layer.msg(data.msg, {icon: 5, time: 1000});
                }
            }, "json");
            layer.close(index);
        });
    });
});